<template>
	<view class="user_card">
		<view class="bookList_item header" v-for="(item, index) in userList" :key="index" @click="toPersonalMsg(item)" :style="{borderBottom:index==userList.length-1?'none':'2rpx solid #eeeeee'}">
			<view class="left">
				<image :src="item.avatar!==null?item.avatar:'/static/mine.png'" alt=""></image>
				<view class="title">
					<view class="name">
						{{ item.realName }}
						<text :class="[item.subscribe == 0 ? '' : 'active']">{{ item.subscribe == 0 ? '未开启' : '已开启' }}</text>
					</view>
					<view class="focus">{{ item.roleNames }}</view>
				</view>
			</view>
			<view class="right" @click.stop="handleCall(item)" v-if="item.showInfo==1||item.showInfo==null||((item.userId==userinfo.user_id)&&item.showInfo==2)">
				<image src="/static/images/call.png" mode=""></image>
				<view>电话</view>
			</view>
		</view>
	</view>
</template>

<script>
// import {userAddress} from '@/apis/index.js'
import { mapState } from 'vuex';
export default {
	props: {
		userList: {
			type: Array
		},
	},
	watch: {
		 
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	data() {
		return {};
	},
	methods: {
		handleCall(res) {
			uni.makePhoneCall({
				// 仅为示例
				phoneNumber: res.phone
			});
		},
		// 去个人信息页面
		toPersonalMsg(res) { 
			if (res.showInfo == 2 && res.userId !== this.userinfo.user_id) {
				uni.showToast({
					title: '人员已开启隐私无法查看',
					icon: 'none'
				});
			} else {
				// 如果是自己去个人信息页面
				if (this.userinfo.user_id == res.userId) {
					uni.navigateTo({
						url: '/pageModules/personalInfo/index?id=' + res.userId
					});
				} else {
					uni.navigateTo({
						url: '/pageModules/personalInfo/otherInfo?id=' + res.userId
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	background-color: #fff;
	padding: 30rpx 48rpx 20rpx 48rpx;
	image {
		width: 64rpx;
		height: 64rpx;
		margin-right: 14rpx;
	}

	.title {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
	}
	.focus {
		display: flex;
		font-size: 24rpx;
		color: #999;
		font-weight: normal;
		width: 450rpx;
		view:nth-child(1) {
			// border-right: 1rpx solid #999999;
			padding-right: 10rpx;
		}
		view:nth-child(2) {
			padding-left: 10rpx;
		}
		.noFocus {
			display: flex;
			align-items: center;
			border-left: 1rpx solid #999999;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}
.bookList_item {
	padding: 28rpx 0rpx;
	border-bottom: 2rpx solid #eeeeee;
	justify-content: space-between;
	align-items: center;
	.name {
		font-size: 28rpx;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;
		text {
			font-size: 22rpx;
			color: #666;
			background-color: #e9e9e9;
			width: 90rpx;
			height: 32rpx;
			background: #e9e9e9;
			border-radius: 16rpx;
			margin-left: 8rpx;
			font-weight: normal;
			display: flex;
			justify-content: center;
		}
		.active {
			color: #0091ff;
			background: #dcf0ff;
		}
	}
}
.left {
	width: 600rpx;
	display: flex;
	image{
		border-radius: 50%;
	}
}
.right {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	image {
		width: 48rpx;
		height: 48rpx;
		margin: 0;
	}
	font-size: 24rpx;
	color: #0091ff;
}
</style>
